<template>
    <div class="stap2">
        <!-- 头部标题 -->
        <header>
            <van-nav-bar title="" left-text="返回" :border="false" left-arrow >
                <template #left>
                    <van-icon name="arrow-left" @click="$router.back()" color="black" size="20" />
                </template>
                <template #title>
                    <h3>嗨购注册</h3>
                </template>
            </van-nav-bar>
        </header>
          <!-- 用户注册表单 -->
        <main>
          <nav>
          <div class="logo">
            <img src="" alt="">
            <p>我们将以短信或电话的形式将验证码发送给您，请注意接听0575/025/0592/010等开头的电话</p>
          </div>
        </nav>
            <div class="fromLogin">
                <p class="line">
                  <van-field class="tel" type="tel" v-model="captha" maxlength="6" size="20px" center clearable placeholder="请输入短信验证码">
                    <template #button>
                      <van-button size="small" type="button" :round="true" color="#e2231e33" v-show="show" :hairline="true" @click="getCaptha" >发送验证码</van-button>
                      <van-button size="small" type="button" :round="true" class="getMsg-btn" disabled v-show="!show" color="#f7f7f7" :hairline="true" @click="getCaptha" >重新发送({{time}}s)</van-button>
                    </template>
                  </van-field>
                </p>
                <p>
                    <van-button color="linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18)" :disabled="flag" :round="true" size="large" @click="verify">
                    下一步
                    </van-button>
                </p>
            </div>
            <p class="error">遇到问题？请 <a href="">联系客服</a></p>
        </main>
    </div>
</template>
<style lang="stylus" scoped>
.error
  padding-top .625rem
  font-size .875rem
  color #555
  a
    color #3b7adb
.logo
  display flex
  flex-direction column
  img
    margin auto
    width 5.5rem
    padding 1.25rem 0
  p
    letter-spacing .0625rem
.fromLogin
    display flex
    flex-direction column
    .line
        border-bottom 1px solid rgb(239,239,239)
        margin-bottom: 1.875rem
        display flex
        width 100%
        margin: 0.5rem 0 2.75rem
        align-items: center
        .tel
            flex 1
            border 0
            height 3.125rem
            font-size 1rem
.stap2 main
    padding 0 1.25rem
    .van-cell
      padding 0
      button
      .van-button__text
        color red
        width 6.5rem
      .van-button--disabled
        .van-button__text
          color black
</style>
<script>
import Vue from 'vue'
import { getDoSendmsgCode, getDoCheckCode } from '@/api/User.js'
import { NavBar, Button, Field, Dialog, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Field)
export default {
  data () {
    return {
      captha: '',
      time: 60,
      capthaFalg: false,
      timer: 0,
      show: true,
      tel: ''
    }
  },
  mounted () {
    // 这里判断用户是否输入手机号如果没有输入手机号则跳转回输入手机号的界面
    this.tel = localStorage.getItem('userId') ? localStorage.getItem('userId') : this.$router.push('/register/stap1')
    getDoSendmsgCode({ tel: this.tel }).then((res) => {
      if (res.code === '200') {
        this.show = false
        this.timer = setInterval(() => {
          this.time--
          if (this.time === -1) {
            clearInterval(this.timer)
            this.time = 60
            this.show = true
          }
        }, 1000)
      } else {
        Toast('服务器错误，请稍后重试')
      }
    })
  },
  computed: {
    flag () {
      if (this.captha.length >= 4) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    // 发送验证码
    getCaptha () {
      Dialog.confirm({
        message: `我们将发送短信/语音验证码至：${this.tel}`
      })
        .then(() => {
          // on confirm
          this.show = false
          getDoSendmsgCode({ tel: this.tel }).then((res) => {
            if (res.code === '200') {
              this.capthaCode = res.data
              this.timer = setInterval(() => {
                this.time--
                if (this.time === -1) {
                  clearInterval(this.timer)
                  this.time = 60
                  this.show = true
                }
              }, 1000)
            } else {
              Toast('服务器错误，请稍后重试')
            }
          })
        })
        .catch(() => {
          // on cancel
          console.log('取消发送')
        })
    },
    verify () {
      getDoCheckCode({ tel: this.tel, telcode: this.captha }).then((res) => {
        if (res.code === '200') {
          this.$router.push('/register/stap3')
        } else {
          Toast('验证码输入错误！')
        }
      })
    }
  }
}
</script>
